<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/Class honor.css">
    <link rel="stylesheet" href="../css/common.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="../js/competion.js"></script>
    <link rel="stylesheet" href="../css/layui.css">

    <title>班级风采</title>
    <style>
        .contain {
            position: absolute;
            width: 86%;
            height: 100%;
            /* border-top: 2px solid gray;
    border-bottom: 2px solid gray;
    border-right: 2px solid gray; */
        }
        
        #photo {
            position: absolute;
            width: 820px;
            height: 250px;
            float: left;
            left: 24px;
            overflow: hidden;
            left: 70px;
            top: 0px;
        }
        
        #photo img {
            position: absolute;
            width: 820px;
            height: 250px;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="all">
        <div class="all1">
            <!-- 团标 -->
            <div class="Emblem">
                <img src="../images/xh.jpg" alt="" srcset="">
            </div>
            <!-- 导航栏 -->
            <ul id="folding-menu">
                <li><a href="index.html" id="index"><i></i>&nbsp;主页</a></li>
                <li><a href="Personal honor.html"><i></i>&nbsp;个人风采</a></li>
                <li><a href="Class honor.html"><i></i>&nbsp;班级风采</a></li>
                <li><a href="Price apply.html"><i></i>&nbsp;评优奖申请</a></li>
                <li><a href="Leave.html"><i></i>&nbsp;请假申请</a></li>
                <li><a href="Homework.html"><i></i>&nbsp;作业提交</a></li>
                <li><a href="Lesson.html"><i></i>&nbsp;课程信息</a></li>
                <li><a href="Set.html"><i></i>&nbsp;设置</a></li>
            </ul>
        </div>
        <!-- header -->
        <div class="header">
            <img src="../images/10140568.jpg"></img>
            <a id="honor" href="my honor.html"><i></i>我的风采</a>
            <a id="zl" href="Modify.html"><i></i>修改资料</a>
            <a id="back" href="login.html"><i></i>退出登录</a>
        </div>
        <div class="lb">

            <!-- 轮播图 -->
            <div class="photo" id="photo">
                <div class="layui-carousel" id="test1" lay-filter="test1">
                    <div carousel-item="" id="lb-img">
                        <div><img src="../images/class1.jpg" alt=""></div>
                        <div><img src="../images/class5.jpg" alt=""></div>
                        <div><img src="../images/class1.jpg" alt=""></div>
                        <div><img src="../images/class5.jpg" alt=""></div>
                        <div><img src="../images/class1.jpg" alt=""></div>
                    </div>
                </div>



                <a href="javascript:;" class="arrow" id="prev">&lt;</a>
                <a href="javascript:;" class="arrow" id="next">&gt;</a>
            </div>

            <!-- 班级参赛 -->
            <div class="match">
                <p title="班级参赛"><a><i></i>&nbsp;班级参赛</a><a href="morecompetion.html" class=" more" target="view_window">更多&raquo;</a></p>
                <div id="cpmpetion">

                </div>
            </div>
            <!-- 团日活动、聚餐 -->
            <div class="pacnic">
                <p title="团日活动"><a><i></i>&nbsp;团日活动</a><a href="moreactivity.html" class="more" target="view_window">
                    更多&raquo;
            </a></p>
                <div id="activity">

                </div>
            </div>
        </div>
        <!-- footer -->
        <div id="footer">
            <div class="bottominfo">
                版权所有：西华师范大学 The Fighting 团队
                </br>
                Copyright © 2018 10-2018 12 / 5000 China West Normal University The Fighting Team
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="../layui/layui.js" charset="utf-8"></script>
    <script src="../js/competion.js"></script>
    <script>
        layui.use(['carousel', 'form'], function() {
            var carousel = layui.carousel,
                form = layui.form;

            //图片轮播
            carousel.render({
                elem: '#test1',
                width: '820px',
                height: '250px',
                interval: 5000
            });

            //事件
            carousel.on('change(test4)', function(res) {
                console.log(res)
            });

            var $ = layui.$,
                active = {
                    set: function(othis) {
                        var THIS = 'layui-bg-normal',
                            key = othis.data('key'),
                            options = {};

                        othis.css('background-color', '#5FB878').siblings().removeAttr('style');
                        options[key] = othis.data('value');
                        ins3.reload(options);
                    }
                };

            //监听开关
            form.on('switch(autoplay)', function() {
                ins3.reload({
                    autoplay: this.checked
                });
            });
            setInterval(function() {
                $('#thinking ul li:last').hide().insertBefore($("#thinking ul li:first")).slideDown(1000);
            }, 3000);


            $('.demoSet').on('keyup', function() {
                var value = this.value,
                    options = {};
                if (!/^\d+$/.test(value)) return;

                options[this.name] = value;
                ins3.reload(options);
            });

        });
    </script>
</body>

</html>